<style lang="less">
@import "../../../assets/style/xinzheng.less";
</style>
<template>
    <div class="xinzheng" ref="validateForm">
        <van-cell-group class="mt10">
        	<van-field
			    v-model="$route.query.lineName"
			    label="线路名称"
			    placeholder="请输入"
			    autosize
			    disabled
			    required/>
			<van-field
			    v-model="$route.query.towerName"
			    label="运行塔号"
			    placeholder="请输入"
			    autosize
			    disabled
			    required/>
            <van-field
            	class="detail_item"
			    v-model="formItem.qxPosition"
			    label="隐患位置"
			    type="textarea"
			    placeholder="请输入"
			    rows="3"
			    autosize
			    required/>
            <van-field
                v-model="$route.query.cmYhName"
                center
                clearable
                label="隐患类别"
                required
                disabled/>
            
            <van-field
            	class="select_item"
            	v-model="formItem.yhRiskLevelName"
                center
                label="风险等级"
                icon="arrow"
                placeholder="请选择"
                @click-icon="levelshow = true"
                required
                disabled>
            </van-field>
            <van-popup v-model="levelshow" position="bottom">
		        <van-picker
		          show-toolbar
		          :columns="yhRiskLevel"
		          @change="onChangeLevel"
		          @confirm="levelshow = false"
		          @cancel="levelshow = false"/>
		    </van-popup>  
		    
            <van-field
            	class="detail_item"
			    v-model="formItem.yhRiskDescription"
			    label="风险描述"
			    type="textarea"
			    placeholder="请输入"
			    rows="4"
			    autosize
			    required/>
            <van-field
                v-model="formItem.yhCurrentMeasures"
                center
                label="当前措施"
                placeholder="请输入"
                required/>
            <van-cell-group class="mt10">
				<task-photo
	            :photoLists="photoLists1"
	            :photoImg="photoImg"
	             @addPhotos="addPhotos"
	             @deletePhotos="deletePhotos"
	            />
			</van-cell-group>
        </van-cell-group>
        <van-cell-group class="mt10">
			<van-field
				class="detail_item"
                clearable
                label="隐患处理方式"
                disabled>
				<van-icon slot="icon" class="slot-cont">
					<span class="left">
						<label for="sfcl" class="check_label">隐患消除</label>
                    	<van-switch v-model="checked2" class="chk_r" size="20px" @change="changeYH"/>
					</span>
				</van-icon>
            </van-field>
		</van-cell-group>
		<van-cell-group class="mt10" v-show="checked2">
			<task-photo
            :photoLists="photoLists2"
            :photoImg="photoImg"
            @addPhotos="addPhotos"
            @deletePhotos="deletePhotos"
            />
		</van-cell-group>
        <van-button size="large" type="primary" class="upload" @click="upLoad">上传</van-button>
    </div>
</template>

<script>
import {
    Row,
    Col,
    Cell,
    CellGroup,
    Field,
    Button,
    Icon,
    SwitchCell,
    Popup,
    Picker,
    Switch,
    Toast,
    Dialog
} from 'vant';
import photoImg from '../../../assets/img/changguixunshi/icon_allow.png';
import { callData } from '../../../axios/axios';
import TaskPhoto from '../yinhuan-photo.vue';
import { getLocation } from '../../../api/android';
import AsyncValidator from "async-validator";
const levelMap = {'正常':0, '关注':1, '严重':2}
const statusMap = {'未处理':0, '已受控':1, '已闭环':2}
export default {
    name: 'shuzhangXinZheng',
    components: {
    	TaskPhoto,
        [Cell.name]:Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Switch.name]: Switch,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [SwitchCell.name]: SwitchCell
    },
    data() {
        return {
            show:false,
            jianzhuShow:false,
            sourceShow:false,
            levelshow:false,
            statusShow:false,
            checked2:false,
            photoImg: photoImg,
            yhRiskLevel:[//0正常/1关注/2严重
            	'请选择','正常','关注','严重'
            ],
            yhStatus:[//0未处理/ 1已受控/ 2已闭环
            	'请选择','未处理','已受控','已闭环'
            ],
            yhSource:[
            	'请选择','遗留','新增'
            ],
            otherItem:{yhDangerName:''},
            formItem:{
            	lineId:'',//线路名称
            	towerId:'',//运行塔号
            	qxPosition:'',//缺陷位置
            	yhLb:'',//隐患类别
            	yhRiskLevel:'',//风险等级
            	yhRiskDescription:'',//风险描述
            	yhCurrentMeasures:'',//当前措施
            	defectType:2//// 1 消缺 2 新增(进来默认是不选状态即2新增)
            },
            rules: {
            	qxPosition:{required:true,message:'隐患位置不可为空'},
           		yhRiskLevel:{required:true,message:'风险等级不可为空'},
            	yhRiskDescription:{required:true,message:'风险描述不可为空'},
            	yhCurrentMeasures:{required:true,message:'当前措施不可为空'}
           	},
            photoLists1:[
                {
                    title: "隐患照片",
                    type: 'getPhotosOne',
                    pictureType: 1,
                    photo:[]
                }
            ],
            photoLists2: [
                {
                    title: "隐患处理照片",
                    type: 'getPhotosTwo',
                    pictureType: 0,
                    photo:[]
                }
            ],
            photoImg: photoImg,
            file: {},
        }
    },
    methods: {
		selectStatus() {
			this.show = true
		},
		onChangeSource(picker, value, index) {
			this.formItem.yhSource = value 
		},
		changeYH(value){
			this.formItem.defectType = value?1:2
		},
	   	onChangeStatus(picker, value, index){
	   		this.formItem.yhStatus = statusMap[value]
			this.formItem.yhStatusName = value
	   	},
	   	onChangeLevel(picker, value, index) {
	   		this.formItem.yhRiskLevel = levelMap[value]
			this.formItem.yhRiskLevelName = value
	   	},
		addPhotos(file){// 触发子组件的addPhotos方法保存图片信息
    		this.file = {...file, ...this.file}
    	},
    	deletePhotos(index, type) {
    		this.file[type].file.splice(index, 1)
    	},
		// 点击上传按钮 
		upLoad() {
			if (!this.file[this.photoLists1[0].type].file || this.file[this.photoLists1[0].type].file.length==0) {//隐患照片必拍
				Dialog.alert({
					title: '提示',
					message: '请拍照！'
				}).then(() => {
					
				});
				return false;
			}
			if (this.checked2 && this.file[this.photoLists2[0].type].file.length==0) {//处理照片控制
				Dialog.alert({
					title: '提示',
					message: '请拍照！'
				}).then(() => {
					
				});
				return false;
			}
			var validator = new AsyncValidator(this.rules);
			validator.validate(this.formItem,(valid)=>{
				if (!valid) {// 验证通过
					const toast = Toast.loading({
					  duration: 0,       // 持续展示 toast
					  forbidClick: true, // 禁用背景点击
					  mask: true,
					  loadingType: 'spinner',
					  message: '上传中...'
					});
					this.$emit('upLoad', this.formItem, this.file)//把file传到父组件里
				} else {// 验证失败
					Toast.clear();
					Toast.fail(valid[0].message);
				}
			});
		}
    }
    
}
</script>

